<template>
    <div>
        <!-- 首页 -->
        <el-header height="auto">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/Main/index' }">首页</el-breadcrumb-item>
            </el-breadcrumb>
            <el-dropdown placement="bottom">
                <span class="el-dropdown-link">
                <img src="../../assets/img/default.jpg" alt="">
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="goToIndex">首页</el-dropdown-item>
                    <el-dropdown-item @click.native="LogOUt">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <section class="data">
            <header class="title">数据统计</header>
            <el-row>
                <el-col :span="4"><div class="data_list head">当日数据：</div></el-col>
                <el-col :span="4"><div class="data_list"><span class="data_num">10</span>新增用户</div></el-col>
                <el-col :span="4"><div class="data_list"><span class="data_num">10</span>新增订单</div></el-col>
                <el-col :span="4"><div class="data_list"><span class="data_num">10</span>新增管理员</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="4"><div class="data_list head">总数据：</div></el-col>
                <el-col :span="4"><div class="data_list"><span class="data_num">10</span>注册用户</div></el-col>
                <el-col :span="4"><div class="data_list"><span class="data_num">10</span>订单</div></el-col>
                <el-col :span="4"><div class="data_list"><span class="data_num">57847</span>管理员</div></el-col>
            </el-row>
        </section>
        <!-- 首页图表 -->
        <section class="line">
            <template>
                <div :style="{margin:'0 auto', width: '912px', height: '400px'}">
                    <div id="container" :style="{width: '100%', height: '100%'}" ref="chartsCon"></div>
                </div>
            </template>
        </section>
    </div>
</template>
<script src="./template.js"></script>
<style scoped>
@import "../../assets/common.css";
.title {
    text-align: center;
    font-size: 30px;
    padding-bottom: 10px;
}
.data {
    padding: 20px;
    padding-bottom: 60px;
}
.el-row {
    margin: 0 -10px;
    padding-bottom: 10px;
}
.data .el-row .head {
    background-color: #ff9800;
}
.data .el-row:last-child .head {
    background-color: #20a0ff;
}
.el-col {
    padding: 0 10px;
}
.el-col .data_list.head {
    border-radius: 6px;
    font-size: 22px;
    padding: 3px 0;
    color: #fff;
}
.el-col .data_list {
    color: #000;
    border-radius: 6px;
    background: #e5e9f2;
    text-align: center
}
.data_list .data_num {
    margin-right: 5px;
    color: #333;
    font-size: 26px;
}
</style>